<script setup>
import {buildingStore} from '@pi/building';
import {userStore} from '@pi/user';
import {reactive, watch} from "vue";
import {input, msg} from "@ut/tool.js";

let building = buildingStore();
let user = userStore();
let props = defineProps({
    show: {type: Boolean, default: false},
    bid: {type: Number, default: 0}
});
let options = reactive({pageNo: 1, pageSize: 10})

watch(() => props.show, e => {
    if (e) {
        options.pageNo = 1;
        options.bid = props.bid;
        building.get(options);
    }
}, {immediate: true});

// 添加 or 修改宿舍楼
function open(type = 0, row = {}) {
    input({
        title: type ? '添加寝室' : '修改寝室',
        content: '请输入寝室名称',
        inputValue: type ? row.label : '',
    }).then(async e => {
        if (e) {
            if (type) {
                row.label = e;
                await building.update(row)
            } else await building.create({bid: props.bid, label: e});
            building.get(options);
        } else msg('输入无效', 'warning')
    })
};

// 删除
async function remove(id) {
    await building.remove(id);
    building.get(options);
}
</script>

<template>
    <h5 class="title">寝室列表</h5>
    <div class="btn">
        <el-button type="primary" icon="Plus" size="small" plain @click="open()" v-if="user.info.role === 1">添加</el-button>
    </div>
    <el-table :data="building.list" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="label" label="寝室号" align="center" />
        <el-table-column label="操作" align="center" v-if="user.info.role === 1">
            <template #default="{row}">
                <el-button type="warning" link icon="Edit" @click="open(1, row)">修改</el-button>
                <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="building.total" small @current-change="building.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>
</template>

<style scoped lang="less">

</style>